<!-- 门店排队 -->
<template>
	<view>
		<view class="line_top">
			<view class="flex_align_center search_con">
				<uni-search-bar radius="30" bgColor="#ffffff" v-model="keywordLineup" placeholder="请输入订单号/店铺名/商品名" clearButton="auto" cancelButton="none" @confirm="searchLineup" @clear="searchLineup('')"/>
				<view class="filter flex_align_center" @click="openfilter">筛选<image src="https://img.jinghushi.com/images/9/2024/11/ENwwv0q5Kyv5qZyk5xiY5rWwllY20n.png"></image></view>
			</view>
			<view class="bar2">
				<view class="cate" :class="{'active':typeIdx4===-1}" @click="changeType(-1)">全部<block v-if="lineUpTotal.acut">({{lineUpTotal.acut}})</block></view>
				<view class="cate" :class="{'active':typeIdx4===1}" @click="changeType(1)">排队中<block v-if="lineUpTotal.ycut">({{lineUpTotal.ycut}})</block></view>
				<view class="cate" :class="{'active':typeIdx4===0}" @click="changeType(0)">已完成<block v-if="lineUpTotal.ocut">({{lineUpTotal.ocut}})</block></view>
			</view>
			<view class="bar3 flex_align_center">
				<view class="line_total">已补贴：<text class="pub_red">{{(lineUpTotal.sendmoney).toFixed(2)}}</text>元</view>
				<view class="line_total">待补贴：<text class="pub_red">{{(lineUpTotal.waitmoney).toFixed(2)}}</text>元</view>
			</view>
		</view>
		<view class="line_list">
			<view class="line_item" v-for="item in list" @click="$navTo(item.url)">
				<view class="line_status">{{item.status}}</view>
				<view class="line_status line_type" :class="{'line_type_md':item.ordertype=='门店','line_type_sh':item.ordertype=='商城'}">{{item.ordertype}}</view>
				<view><text class="line_tit">消费场景：</text><text class="line_con clamp">{{item.supname}}</text></view>
				<view><text class="line_tit">流水号：</text><text class="line_con">{{item.ordersn}}</text></view>
				<view><text class="line_tit">消费金额：</text><text class="line_con">¥{{item.price}}</text></view>
				<view><text class="line_tit">排队金额：</text><text class="line_import">¥{{item.ratemoney}}</text></view>
				<view><text class="line_tit">补贴比例：</text><text class="line_import" style="color:red">{{item.feerate}}%</text></view>
				<view v-if="item.money>0">
					<text class="line_tit">待补贴金额：</text><text class="line_import">¥{{item.money}}</text>
					<text v-if="item.money>0" class="line_con">（每日更新）</text>
				</view>
				<view>
					<text class="line_tit">已发放：</text><text class="line_import">{{item.sendmoney}}</text>
					<text class="line_con" v-if="item.freeze==1&&item.flag==1">（冻结中，确认收货7天后发放）</text>
					<text class="line_con" v-else-if="item.freeze==1&&item.flag==0">（冻结中，核销后发放）</text>
					<text class="line_con" v-else-if="item.freeze==1&&item.flag==3">（冻结中，考核完成后发放）</text>
					<text class="line_con" v-else>（发放至收入）</text>
					<text class="line_con" @click.stop="$navTo('/pages/user/lineUp?id='+item.id+'&supname='+item.supname+'&price='+item.price+'&ratemoney='+item.ratemoney+'&sendmoney='+item.sendmoney+'&money='+item.money)">发放明细></text>
				</view>
				<view v-if="item.ranking!=0">
					<text class="line_tit">当前排名：</text><text class="line_import">{{item.ranking}}</text>
					<text class="line_con">（每日凌晨更新）</text>
				</view>
				<view class="line_status line_con" v-if="item.url!=''">查看订单 ></view>
				<view><text class="line_tit">消费时间：</text><text class="line_con">{{item.paytime}}</text></view>
			</view>
			<view class="empty_loading">
				<image v-if="isloading" src="/static/business/loading.gif" mode=""></image>
				<view v-if="!ismore">到底了~</view>
			</view>
		</view>
		<uni-popup ref="filter_popup" background-color="#fff" type="bottom">
			<view class="filter_con">
				<view class="fil_tit">日期选择：</view>
				<uni-datetime-picker v-model="beginlineup" type="daterange" @change="changeTime($event)"/>
				<view class="fil_tit">订单类型：</view>
				<view class="flex_between">
					<view class="fil_it" :class="{'fil_it_ac':typelineup==1}" @click="changeTypeline(1)">商城订单</view>
					<view class="fil_it" :class="{'fil_it_ac':typelineup==2}" @click="changeTypeline(2)">门店订单</view>
					<view class="fil_it" :class="{'fil_it_ac':typelineup==3}" @click="changeTypeline(3)">团购订单</view>
				</view>
				<view class="flex_between">
					<view class="fil_btn fil_reset" @click="sure('reset')">重置</view>
					<view class="fil_btn fil_sure" @click="sure('sure')">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: 'partnerlineUp',
		data() {
			return {
				typeIdx4: -1,
				page: 0,
				list: [],
				isloading: false,
				isempty: false,
				beginlineup: '',
				endlineup: '',
				keywordLineup: '',
				typelineup: 0,
				lineUpTotal: []
			};
		},
		onLoad(){
			this.getLineUporderList();
			this.getLineUpTotal();
		},
		onReachBottom() {
			this.getLineUporderList();
		},
		methods: {
			// 排队明细
			getLineUporderList(){
				this.page++;
				this.isloading = true;
				this.ismore = true;
				this.$axios('Lists/teamorder', "POST", 'order', {
					status: this.typeIdx4,
					page: this.page,
					keywords: this.keywordLineup,
					begin: this.beginlineup,
					end: this.endlineup,
					type: this.typelineup
				}).then(res => {
					this.isloading = false;
					if (res.data.code == 200) {
						this.list = [...this.list, ...res.data.data.list];
						this.ismore = res.data.data.list.length > 0;
					}
				})
			},
			// 排队明细统计
			getLineUpTotal(){
				this.$axios('Lists/teamfeeinfo', "POST", 'order', {
					status: this.typeIdx4,
					keywords: this.keywordLineup,
					begin: this.beginlineup,
					end: this.endlineup,
					type: this.typelineup
				}).then(res => {
					if (res.data.code == 200) {
						this.lineUpTotal = res.data.data.info;
					}
				})
			},
			changeTime(e){
				if(e[0]){
					this.beginlineup = e[0];
					this.endlineup = e[1];
				}else{
					this.beginlineup = '';
					this.endlineup = '';
				}
			},
			changeType(id){
				if(id==this.typeIdx4) return;
				this.typeIdx4 = id;
				this.page = 0;
				this.list = [];
				this.getLineUporderList();
				this.getLineUpTotal();
			},
			changeTypeline(id){
				this.typelineup = id;
			},
			openfilter(){
				this.$refs.filter_popup.open()
			},
			sure(type){
				if(type=='reset'){
					this.beginlineup = '';
					this.endlineup = '';
					this.typelineup = 0;
				}
				this.page = 0;
				this.list = [];
				this.getLineUporderList();
				this.getLineUpTotal();
				this.$refs.filter_popup.close()
			},
			searchLineup(v){
				if(v!=''){
					if(this.keywordLineup==''){
						return this.$api.msg('请输入订单号/店铺名/商品名');
					}
				}else{
					this.keywordLineup = v;
				}
				this.page = 0;
				this.list = [];
				this.getLineUporderList();
				this.getLineUpTotal();
				this.$refs.filter_popup.close()
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: #FBF8FE;
		padding-bottom: 60rpx;
	}
	.line_top{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background: #FBF8FE;
		padding-top: 20rpx;
		background: linear-gradient(180deg, #4B05A7 0%, #8615E1 45%, #FBF8FE 100%);
	}
	.search_con{
		width: 100%;
		margin-top: -30rpx;
		padding: 0 20rpx;
		// background: #FBF8FE;
		.uni-searchbar {
			width: 600rpx;
		}
		.uni-searchbar__box{
			justify-content: flex-start;
		}
		.filter{
			width: calc(100% - 600rpx);
			color:#fff;
			text-align: center;
			font-weight: bold;
			font-size: 30rpx;
			image{
				width: 30rpx;
				height: 30rpx;
				margin-left: 6rpx;
			}
		}
	}
	.bar2 {
		border: none;
		line-height: 75upx;
		font-weight: normal;
		display: flex;
		text-align: center;
		padding: 16rpx 20rpx;
		background: #FBF8FE;
		.cate {
			position: relative;
			padding: 0 36rpx;
			height: 58rpx;
			background: #FFFFFF;
			border-radius: 12rpx;
			line-height: 58rpx;
			color: #333333;
			font-size: 24rpx;
			margin-right: 26rpx;
			white-space: nowrap;
		}
		.active {
			background: linear-gradient( 90deg, #9736E5 0%, #4B05A7 100%);
			color: #FFFFFF;
		}
		.round{
			right: 0;
		}
	}
	.bar3{
		background: #FBF8FE;
		padding: 0 20rpx 10rpx;
		font-size: 24rpx;
		display: flex;
		.line_total{
			margin-right: 10rpx;
		}
	}
	.filter_con{
		padding: 40rpx 20rpx;
		.fil_tit{
			margin: 36rpx 0;
		}
		.fil_it{
			width: 31%;
			line-height: 60rpx;
			border-radius: 80rpx;
			background: #FBF8FE;
			color: #333;
			text-align: center;
			font-size: 24rpx;
		}
		.fil_it_ac{
			background: #8917E2;
			color: #fff;
		}
		.fil_btn{
			width: 48%;
			line-height: 74rpx;
			border-radius: 50rpx;
			text-align: center;
			margin: 60rpx 0;
		}
		.fil_reset{
			background: #F0E1FF;
			color: #333333;
		}
		.fil_sure{
			background: linear-gradient( 90deg, #B92DF1 0%, #8917E2 100%);
			color: #FFFFFF;
		}
	}
.line_list{
	padding: 0 20rpx;
	padding-top: calc(var(--status-bar-height) + 170rpx);
	.line_total{
		margin-top: 20rpx;
		font-size: 24rpx;
	}
	.line_item{
		margin-top: 20rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		padding: 10rpx 20rpx;
		font-size: 24rpx;
		line-height: 50rpx;
		view{
			display: flex;
		}
		.line_status{
			float: right;
			font-weight: 600;
			font-size: 24rpx;
		}
		.line_type{
			// background: linear-gradient( 270deg, #8816E1 0%, #B92DF1 100%);
			font-size: 20rpx;
			border-radius: 10rpx;
			color: #fff;
			padding: 0 10rpx;
			margin-right: 10rpx;
			background:#06803A;
			color: #fff;
		}
		.line_type_md{
			background: #e3452c;
		}
		.line_type_sh{
			background: #8615E1;
		}
		.line_tit{
			font-weight: 600;
			white-space: nowrap;
		}
		.line_con{
			color: #999999;
		}
		.line_import{
			color: $bg-color;
			font-weight: 600;
		}
	}
}
</style>
